<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>消息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/jquery-weui.min.css">
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="outwrap" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
    <div class="homewrap">                                                                                               
      <div class="syl-bg">
          <img src="images/wu/bg.jpg" dpoint="center" dpoint="center">    
      </div>
      <div class="syl-content">
          <div class="cont-text position-3">
              <div class="cont-top">
                  <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                      <div class="weui-media-box__hd" style="border-radius: 50%; overflow: hidden;">
                          <img class="weui-media-box__thumb" src="images/log.jpg" width="100%" height="100%">
                      </div>
                      <div class="weui-media-box__bd">
                          <h4 class="weui-media-box__title">欢迎进入石芽岭中学班级空间</h4>
                          <div class="weui-media-box__desc">
                          今日访问量:<span id="in-tady">20</span>
                          总访问量:<span id="in-sum">15000</span>
                          </div>
                      </div>
                  </a>
              </div>
              <div class="cont-cen">
                 <div class="cen-list" id="now_grow">
                    <div class="cen-title">
                        <img src="images/xing.png" alt="">
                        <span>选择班级空间</span>
                    </div>
                    <div class="cen-selebtn">
                        <a><img src="images/to_left.png"></a>
                        <a class="span">高中三年级</a>
                        <a><img src="images/to_right.png"></a>
                    </div>
                    <ul class="cen-iteam" id="now_growList">
                        <li>
                            <a href="">
                              <div class="zhengfang">
                                  <img src="images/log.jpg" alt="" width="100%" dpoint="center">
                              </div>                        
                              <span>二(3)班</span>
                            </a>                      
                        </li>
                    </ul>
                 </div>  
                 <div class="cen-list old" id="old_grow">
                    <div class="cen-title">
                        <img src="images/xing.png" alt="">
                        <span>往届班级空间</span>
                    </div>
                    <div class="cen-selebtn">
                        <a><img src="images/to_left.png"></a>
                        <a class="span">2017届 毕业班</a>
                        <a><img src="images/to_right.png"></a>
                    </div>
                    <ul class="cen-iteam">
                        <li>
                            <a href="">
                              <div class="zhengfang">
                                  <img src="images/log.jpg" alt="" width="100%" dpoint="center">
                              </div> 
                              <span>二(3)班</span>
                            </a>                      
                        </li>
                    </ul>
                 </div> 
              </div>
          </div>
      </div>
    </div>
</div>
</body>
</html>
<script>  
//扩展方法,渲染数据
$.extend({
    dataFnArgs:{},
    dataFn:function(nowData,n,dom){
        //设置统一的选中年级的 index
        if(dom[0].index === undefined){
              dom[0].index = n;   
        }
        var nowDataArr = [];
        var listWrap = dom.find(".cen-iteam");
        var btns = dom.find(".cen-selebtn a");
        $.each(nowData,function(k,v){
            var _html = "";
            $.each(v.iteams,function(i,obj){
                _html += "<li>"+
                              '<a href="'+obj.src+'">'+
                                '<div class="zhengfang">'+
                                    '<img src="'+obj.pic+'" width="100%" dpoint="center">'+
                                '</div>'+
                                '<span>'+obj.name+'</span>'+
                              '</a>'+
                          '</li>';
            })
           nowDataArr.push(_html); 
        });
        //封装初始化渲染函数
        (window.xuanran = function(x,y,strx,stry){ 
            // $(".cont-text").fadeOut(0,function(){
            //    $(".cont-text").fadeIn(200);
            // })                         
            x.html(strx); 
            y.html(stry); 
            $(function(){
              $.swFn.posit(".cont-text"); 
            }) 
                        
        })(listWrap,btns.eq(1),nowDataArr[dom[0].index],nowData[dom[0].index].grow);

        btns.eq(0).click(function(){         
            //选择当前班级左侧箭头按钮
            dom[0].index --;                       
            if(dom[0].index <=0)dom[0].index=0;
            window.xuanran(listWrap,btns.eq(1),nowDataArr[dom[0].index],nowData[dom[0].index].grow);
        })
        btns.eq(1).click(function(){                 
            //选择当前班级中间文字 
            var _html = '<ul class="syl-model">';
            $.each(nowData,function(k,v){
               if(k === dom[0].index){
                  _html += '<li class="act">'+ v.grow +'</li>'
               }else{
                  _html += '<li>'+ v.grow +'</li>'
               }            
            })
            _html += "</ul>";
            $.modal({
              title: "选择年级",
              text: _html,
              buttons: [
                { text: "确定", onClick: function(){ } },
                { text: "取消", className: "default", onClick: function(){ } },
              ]
            });

            $.dataFnArgs = {
              w:listWrap,
              t:btns.eq(1),
              a:nowDataArr,
              g:nowData,
              dom:dom[0]             
            };
        })
        btns.eq(2).click(function(){        
            //选择当前班级右侧箭头按钮 
            dom[0].index ++;                       
            if(dom[0].index >= nowData.length)dom[0].index=nowData.length-1;
            window.xuanran(listWrap,btns.eq(1),nowDataArr[dom[0].index],nowData[dom[0].index].grow); 
        })
    }
})

//数据1
var nowData = [
  {grow:"初中一年级",
  iteams:[
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"} 
  ]
  },
  {grow:"初中二年级",
  iteams:[
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"} 
  ]
  },
  {grow:"初中三年级",
  iteams:[
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"},
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"},
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"},
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"},
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}
  ]
  },
];

//数据2
var oldData = [
  {grow:"2015届 毕业班",
  iteams:[
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"} 
  ]
  },
  {grow:"2016届 毕业班",
  iteams:[
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"} 
  ]
  },
  {grow:"2017届 毕业班",
  iteams:[
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}, 
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"},
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"},
    {name:"二(2)班",pic:"images/log.jpg",src:"classroom_home.html"}
  ]
  },
];

//调用 当屏幕改变时执行
$(function(){
    $.pushFn(
      function(){
         $.swFn.fang(".zhengfang");                //使元素自适应高度等于宽度
         $.swFn.posit(".cont-text");               //当子元素高度小于父元素时,子元素位于父元素的1/3处   
         $.swFn.imgCenter("img[dpoint=center]");     
      }
    )();
})

//调用方法渲染数据
$.dataFn(nowData,1,$("#now_grow"));
$.dataFn(oldData,1,$("#old_grow"));

$(document).on("click",".syl-model li",function(){  
    var index = $(this).index();  
    $.dataFnArgs.dom.index = index;
    window.xuanran($.dataFnArgs.w,$.dataFnArgs.t,$.dataFnArgs.a[index],$.dataFnArgs.g[index].grow);
    $.closeModal();
})

</script>